<template>
  <div class="workbench">
    <div class="workbench_header">
      <div class="workbench_header_icon">
        <ArrowLeftOutlined style="cursor: pointer" @click="backHome" />
      </div>
    </div>
    <div class="card">
      <div
        v-for="item in menuList"
        :key="item.id"
        class="card_item"
        @click="enterItem(item)"
      >
        <div class="card_item_icon">
          <component :is="item.icon"></component>
        </div>
        <span>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
  ArrowLeftOutlined,
  ChromeOutlined,
  ClockCircleOutlined,
  EditOutlined,
  HeatMapOutlined,
  ScissorOutlined
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

const menuList = [
  {
    id: 1,
    icon: ClockCircleOutlined,
    title: '桌面时间',
    code: '',
    path: '/desktopTime',
    size: {
      width: 300,
      height: 200
    }
  },
  {
    id: 2,
    icon: EditOutlined,
    title: '记事本',
    code: '',
    path: '/notepad'
  },
  {
    id: 3,
    icon: ScissorOutlined,
    title: '截屏',
    code: 'screen-capture',
    path: '/screenCapture'
  },
  {
    id: 4,
    icon: ClockCircleOutlined,
    title: '时钟罗盘',
    code: '',
    path: '/clockCompass',
    size: {
      width: 600,
      height: 600
    }
  },
  {
    id: 5,
    icon: HeatMapOutlined,
    title: '3D',
    code: '',
    path: '/tresDemo',
    size: {
      width: 600,
      height: 600
    }
  },
  {
    id: 6,
    icon: ChromeOutlined,
    title: '浏览器',
    code: '',
    path: '/browser',
    size: {
      width: 600,
      height: 600
    }
  }
];

const router = useRouter();
const enterItem = (item) => {
  if (item.code) {
    globalThis.api.childrenWindow(JSON.stringify(item));
  } else {
    router.push(item.path);
    globalThis.api.setWindowSize(item.size);
  }
};

const backHome = () => {
  router.push('/');
};
</script>
<style scoped lang="less">
.workbench {
  width: 100%;
  height: 100%;
  color: #fff;
  &_header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    -webkit-app-region: drag;
    padding: 0 10px;
    &_icon {
      -webkit-app-region: none;
    }
  }
  .card {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 10px 0;
    &_item {
      width: 100px;
      height: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      cursor: pointer;
      transition: box-shadow 0.5s;
      &:hover {
        box-shadow: 0 0 10px rgba(255, 255, 255, 1) inset;
      }
      &_icon {
        font-size: 30px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
